<template>
  <div class="main">
    <div v-if="!isRegistSuccess">
      <el-card class="box-card" v-if="disclaimers.isAgree" :style="{ width }">
        <div class="main-wrapper">
          <el-steps :active="active" finish-status="success">
            <el-step style="font-size: 14px" />
            <el-step />
            <el-step />
          </el-steps>
          <div class="steps">
            <!-- ***************************** Step1 ***************************** -->
            <el-form v-show="active == 0" :model="form1" ref="form1" :rules="rules1">
              <!-- 推荐人 -->
              <el-form-item label="推荐人:" prop="distrName">
                <div style="font-weight: bold; font-size: 17px">
                  <el-input disabled v-model="form1.distrName" />
                </div>
              </el-form-item>
              <!-- 推荐人id -->
              <el-form-item label="推荐人id" prop="referrerId">
                <el-input disabled v-model="form1.referrerId" />
              </el-form-item>
              <!-- 邮箱 -->
              <el-form-item label="邮箱" prop="email">
                <el-input clearable v-model="form1.email" />
              </el-form-item>
              <!-- 密码 -->
              <el-form-item label="密码" prop="password">
                <el-input clearable v-model="form1.password" show-password />
              </el-form-item>
              <!-- 确认密码 -->
              <el-form-item label="确认密码" prop="passwordAgain">
                <el-input clearable v-model="form1.passwordAgain" show-password />
              </el-form-item>
              <!-- 验证码 -->
              <el-form-item label="验证码" prop="code">
                <el-input placeholder="请输入内容" v-model="form1.code">
                  <template slot="append">
                    <el-button :disabled="form1.disabled" @click="sendEemailCode">
                      {{ form1.codeText }}
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <div style="text-align: right">
                  <el-button type="primary" plain @click="next">下一步</el-button>
                </div>
              </el-form-item>
            </el-form>
            <!-- ***************************** Step1 end***************************** -->

            <!-- ***************************** Step2 ***************************** -->
            <el-form v-show="active == 1" :model="form2" ref="form2" :rules="rules2">
              <!-- 商户名称 -->
              <el-form-item label="商户名称" prop="merchantName">
                <el-input clearable v-model="form2.merchantName" />
              </el-form-item>
              <!-- 商家地址 -->
              <el-form-item label="商家地址" prop="merchantAddress">
                <el-input clearable v-model="form2.merchantAddress" />
              </el-form-item>
              <!-- 商家电话 -->
              <el-form-item label="商家电话" prop="merchantTel">
                <el-input clearable v-model="form2.merchantTel" />
              </el-form-item>
              <!-- 商家其他联系方式 -->
              <el-form-item label="商家其他联系方式" prop="merchantOtherTel">
                <el-input clearable v-model="form2.merchantOtherTel" />
              </el-form-item>
              <!-- 商家营业开始时间 -->
              <el-form-item label="商家营业开始时间" prop="merchantTradeStartTime">
                <el-time-select
                  style="width: 100%"
                  :picker-options="{
                    start: '06:30',
                    step: '00:10',
                  }"
                  v-model="form2.merchantTradeStartTime" />
              </el-form-item>
              <!-- 商家营业结束时间 -->
              <el-form-item label="商家营业结束时间" prop="merchantTradeEndTime">
                <!-- <el-input clearable v-model="form2.merchantTradeEndTime" /> -->
                <el-time-select
                  style="width: 100%"
                  :picker-options="{
                    start: '06:30',
                    step: '00:10',
                  }"
                  v-model="form2.merchantTradeEndTime" />
              </el-form-item>
              <el-form-item>
                <div style="text-align: right">
                  <el-button type="primary" plain @click="pre">上一步</el-button>
                  <el-button type="primary" plain @click="next">下一步</el-button>
                </div>
              </el-form-item>
            </el-form>
            <!-- ***************************** Step2 end***************************** -->

            <!-- ***************************** Step3 ***************************** -->
            <div v-show="active == 2" class="step3">
              <div class="step3-confirm">
                <el-form :model="form3" size="mini">
                  <!-- 推荐人 -->
                  <el-form-item label="推荐人:" prop="distrName">
                    <div style="font-weight: bold; font-size: 17px">
                      <el-input disabled v-model="form1.distrName" />
                    </div>
                  </el-form-item>
                  <!-- 推荐人id -->
                  <el-form-item label="推荐人id" prop="referrerId">
                    <el-input disabled v-model="form1.referrerId" />
                  </el-form-item>
                  <!-- 邮箱 -->
                  <el-form-item label="邮箱" prop="email">
                    <el-input disabled v-model="form1.email" />
                  </el-form-item>
                  <!-- 商户名称 -->
                  <el-form-item label="商户名称" prop="merchantName">
                    <el-input disabled v-model="form2.merchantName" />
                  </el-form-item>
                  <!-- 商家地址 -->
                  <el-form-item label="商家地址" prop="merchantAddress">
                    <el-input disabled v-model="form2.merchantAddress" />
                  </el-form-item>
                  <!-- 商家电话 -->
                  <el-form-item label="商家电话" prop="merchantTel">
                    <el-input disabled v-model="form2.merchantTel" />
                  </el-form-item>
                  <!-- 商家其他联系方式 -->
                  <el-form-item label="商家其他联系方式" prop="merchantOtherTel">
                    <el-input disabled v-model="form2.merchantOtherTel" />
                  </el-form-item>
                  <!-- 商家营业开始时间 -->
                  <el-form-item label="商家营业开始时间" prop="merchantTradeStartTime">
                    <el-time-select
                      disabled
                      style="width: 100%"
                      :picker-options="{
                        start: '06:30',
                        step: '00:10',
                      }"
                      v-model="form2.merchantTradeStartTime" />
                  </el-form-item>
                  <!-- 商家营业结束时间 -->
                  <el-form-item label="商家营业结束时间" prop="merchantTradeEndTime">
                    <!-- <el-input clearable v-model="form2.merchantTradeEndTime" /> -->
                    <el-time-select
                      disabled
                      style="width: 100%"
                      :picker-options="{
                        start: '06:30',
                        step: '00:10',
                      }"
                      v-model="form2.merchantTradeEndTime" />
                  </el-form-item>
                </el-form>
              </div>
              <div class="step3-btns">
                <el-button type="primary" plain @click="pre">上一步</el-button>
                <el-button type="primary" plain @click="handleSubmit"> 提交 </el-button>
              </div>
            </div>
            <!-- ***************************** Step3 end***************************** -->
          </div>
        </div>
      </el-card>
    </div>
    <div v-else>
      <el-result icon="success" title="success"> </el-result>
    </div>
    <Disclaimers :show.sync="disclaimers.show" @agree="disclaimers.isAgree = true" />
  </div>
</template>

<script>
import Disclaimers from './disclaimers.vue'
import {
  getDistrNameById,
  checkMerchantName,
  submitRegister,
  sendEmail,
  checkEmailCode,
} from '@/api/platform/recommenSellerRegist'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'recommenSellerRegist',
  components: { Disclaimers },
  data() {
    //验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      //验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        //合法的邮箱
        return cb()
      }
      //邮箱不合法
      cb(new Error('请输入合法的邮箱！'))
    }
    return {
      /**是否注册成功 */
      isRegistSuccess: false,

      disclaimers: {
        show: true,
        isAgree: false,
      },

      active: 0,
      form1: {
        checked: false,
        leftTime: 120,
        codeText: '发送验证码',
        disabled: false,
        referrerId: this.$route.query.distrId,
        email: '',
        password: '',
        passwordAgain: '',
        code: '',
      },
      form2: {
        checked: false,
        merchantName: '',
        merchantAddress: '',
        merchantTel: '',
        merchantOtherTel: '',
        merchantTradeStartTime: '',
        merchantTradeEndTime: '',
      },
      form3: {},
      rules1: {
        referrerId: [{ required: true, message: '请输入', trigger: 'blur' }],
        distrName: [{ required: true, message: '请输入', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入', trigger: 'blur' }],
        passwordAgain: [{ required: true, message: '请输入', trigger: 'blur' }],
        code: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      rules2: {
        merchantName: [{ required: true, message: '请输入', trigger: 'blur' }],
        merchantAddress: [{ required: true, message: '请输入', trigger: 'blur' }],
        merchantTel: [{ required: true, message: '请输入', trigger: 'blur' }],
        passwordAgain: [{ required: true, message: '请输入', trigger: 'blur' }],
        merchantOtherTel: [{ required: true, message: '请输入', trigger: 'blur' }],
        merchantTradeStartTime: [{ required: true, message: '请输入', trigger: 'blur' }],
        merchantTradeEndTime: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    const data = {
      distrId: this.$route.query.distrId,
    }
    getDistrNameById(data).then((res) => {
      const { code, msg } = res
      if (code === 200) {
        this.form1.distrName = msg
      }
    })
  },
  computed: {
    width() {
      const ua = navigator.userAgent
      const isMobile = /Mobile|Android|iOS|iPhone|iPad|iPod|Opera Mini/i.test(ua)
      if (isMobile || window.matchMedia('(max-width: 768px)').matches) {
        // 手机端
        return '90%'
      } else {
        // 浏览器端
        return '550px'
      }
    },
  },
  created() {},
  methods: {
    codeTimer() {
      if (this.form1.leftTime >= 1) {
        this.form1.disabled = true
        this.form1.codeText = this.form1.leftTime + 's 后获取'
        this.form1.leftTime -= 1
        setTimeout(() => this.codeTimer(), 1000)
      } else {
        this.form1.codeText = '发送验证码'
        this.form1.disabled = false
        this.form1.leftTime = 120
      }
    },
    /**发送邮箱验证码 */
    sendEemailCode() {
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      if (!regEmail.test(this.form1.email)) {
        return this.$message.error('邮箱格式不正确!')
      }

      this.form1.codeText = '发送中...'
      this.form1.disabled = true
      sendEmail(this.form1.email)
        .then((res) => {
          const { msg } = res
          this.$message({ type: 'success', message: msg})

          this.codeTimer()
        })
        .catch((e) => {
          this.form1.codeText = '发送验证码'
          this.form1.disabled = false
        })
    },
    pre() {
      if (this.active == 0) {
        return
      } else {
        this.active -= 1
      }
    },
    next() {
      switch (this.active) {
        case 0:
          // 判断两次密码
          if (this.form1.password !== this.form1.passwordAgain) {
            return this.$message.error('两次密码输入不一致')
          }
          this.$refs.form1.validate((valid) => {
            if (valid) {
              // 是否已经校验
              if (!this.form1.checked) {
                checkEmailCode(this.form1.email, this.form1.code).then((res) => {
                  const { code } = res
                  if (code === 200) {
                    this.active += 1
                    this.form1.checked = true
                  }
                })
              } else {
                this.active += 1
              }
            }
          })
          break
        case 1:
          this.$refs.form2.validate((valid) => {
            if (valid) {
              if (!this.form2.checked) {
                checkMerchantName({
                  merchantName: this.form2.merchantName,
                }).then((res) => {
                  const { code } = res
                  if (code === 200) {
                    this.active += 1
                    this.form3 = JSON.parse(
                      JSON.stringify({
                        ...this.form1,
                        ...this.form2,
                      }),
                    )
                  }
                })
              } else {
                this.active += 1
              }
            }
          })

          break
        case 2:
          break

        default:
          break
      }
    },
    handleSubmit() {
      const data = {
        ...this.form1,
        ...this.form2,
      }
      console.log(`data ==>`, JSON.parse(JSON.stringify(data)))
      submitRegister(data).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg})

          // location.reload();
          this.isRegistSuccess = true
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
  &-wrapper {
    // width: 700px;
    // height: 750px;
    padding: 30px 0px;
    .steps {
      margin-top: 20px;
      .step3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        &-confirm {
          width: 100%;
          height: 400px;
          border: 1px dashed #ccc;
          border-radius: 5px;
          margin-bottom: 15px;
          font-size: 18px;
          font-weight: bold;
          overflow: auto;
          form {
            width: 100%;
            padding: 20px;
          }
        }
        &-btns {
          width: 100%;
          text-align: right;
        }
      }
    }
  }
}
</style>
